<script setup>
import {ref} from "vue";

const upload_status = ref(true)
const handleOpen = () => {
  window.location.href = 'https://lsz.lszbg.com/jumpapp/index.html#/'
}
</script>

<template>
  <!-- #ifdef H5 -->
  <view class="upload_shadow" v-if="upload_status">
    <view class="l_boxs">
      <image @tap="upload_status=false" src="https://lsz.lszbg.com/imgs/old/c_close.png"></image>
      <view class="l_text">下载领食周边购APP，点餐更轻松</view>
    </view>
    <view class="open_btn" @tap="handleOpen()">立即下载</view>
  </view>
  <!-- #endif -->
</template>

<style scoped lang="scss">
.upload_shadow {
  position: fixed;
  left: 0;
  width: 100%;
  padding-left: 20rpx;
}

.upload_shadow {
  background-color: #FFF7E3;
  width: 100%;
  z-index: 111;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-left: 20rpx;
  position: relative;

  image {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
  }

  .l_boxs {
    display: flex;
    align-items: center;
  }

  .l_text {
    font-size: 28rpx;
    color: #FE5414;
    display: flex;
    align-items: center;

    &:before {
      content: '';
      display: inline-block;
      width: 48rpx;
      height: 48rpx;
      background: url('https://lsz.lszbg.com/imgs/images/logo_wechat.png') no-repeat center center / 100% 100%;
      margin-right: 10rpx;
    }
  }

  .open_btn {
    background: linear-gradient(272deg, #FEB058 0%, #FC754A 100%);
    height: 80rpx;
    line-height: 80rpx;
    width: 200rpx;
    font-size: 30rpx;
    color: #fff;
    text-align: center;
  }
}
</style>